<template>
  <div>
    <el-input
      v-model="showValue"
      :disabled="disabled"
      prefix-icon="ele-User"
      class="select-user-input"
      readonly
      @click="handleShow"
    />
    <el-dialog
      v-model="dialogVisible"
      title="人员选择"
      append-to-body
    >
      <el-tree-v2
        ref="empTreeRef"
        :accordion="true"
        :data="data"
        :props="defaultProps"
        show-checkbox
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span v-if="data.weight === 5">{{ node.label }}</span>
            <span v-if="data.weight === 6">{{ data.nickName }}({{ node.label }})</span>
          </span>
        </template>
      </el-tree-v2>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">
            {{ $t("common.cancel") }}
          </el-button>
          <el-button
            type="primary"
            @click="handleSubmit"
          >
            {{ $t("common.confirm") }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" name="TUserSelect" setup>
import { onMounted, ref, defineProps } from "vue";
import { getEmpTreeRequest } from "../../../api";
import { formEmits, formItemProps, useFormItem } from "../hooks/useFormItemHook";
import type { ElTree } from "element-plus";
import { useUserInfo } from "@/stores/userInfo";
import { storeToRefs } from "pinia";

const data = ref<any[]>([]);
const showValue = ref("");
const dialogVisible = ref(false);
const defaultProps = ref({
  children: "children",
  label: "name"
});

const props = defineProps({
  ...formItemProps,
  disabled: {
    type: Boolean,
    default: false
  },
  defaultCurrentUser: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(formEmits);

const { changeValue } = useFormItem(props, emits, true);

const handleShow = () => {
  if (props.disabled) return;
  dialogVisible.value = true;
};

const empTreeRef = ref<InstanceType<typeof ElTree> | null>(null);

const handleSubmit = () => {
  const checkedNodes = empTreeRef.value!.getCheckedNodes(true);
  changeValue.value = checkedNodes
    .filter((item: any) => !item.id.startsWith("dept"))
    .map((item: any) => {
      return { name: item.name, nickName: item.nickName, id: item.id };
    });
  dialogVisible.value = false;
  if (changeValue.value.length) {
    showValue.value = changeValue.value.map((item: any) => item.nickName || item.name).join(",");
  }
};

const userInfoStore = useUserInfo();
const { userInfos } = storeToRefs(userInfoStore);

onMounted(async () => {
  getEmpTreeRequest({}).then((res: any) => {
    data.value = res.data;
  });
  if (props.value && Array.isArray(props.value)) {
    showValue.value = props.value!.map((item: any) => item.nickName).join(",");
  }
  console.log(userInfos.value);
  // 默认值是空的 默认当前用户
  if (props.defaultCurrentUser && isEmptyArray(props.value as any[])) {
    await userInfoStore.getApiUserInfo().then((res: any) => {
      changeValue.value = [{ name: res?.userName, nickName: res?.nickName, id: res.userId }];
      showValue.value = changeValue.value.map((item: any) => item.nickName || item.name).join(",");
    });
  }
});

/**
 * 判断数组是否是空的
 */
const isEmptyArray = (arr: any[]) => {
  return !arr || !arr.length;
};
</script>

<style>
.select-user-input {
  cursor: pointer;
}
</style>
